/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("toast") {
    $titon-toast-class: generate-class-name($titon-toast);
    $titon-toast-positions: map-get($titon-toast, "positions");
    $titon-toast-animations: map-get($titon-toast, "animations");

    #{generate-class-name($titon-toast, "gate")} {
        position: fixed;
        margin: theme-setting("margin");
        width: 20%;
        z-index: map-get($titon-settings-zindex, "toast");

        @include if-max(breakpoint-setting("sm", 1)) {
            width: 100%;
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "top-left")) {
            &.top-left {
                top: 0;
                left: 0;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "top")) {
            &.top {
                top: 0;
                left: 50%;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "top-right")) {
            &.top-right {
                top: 0;
                right: 0;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "left")) {
            &.left {
                top: 50%;
                left: 0;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "right")) {
            &.right {
                top: 50%;
                right: 0;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "bottom-left")) {
            &.bottom-left {
                bottom: 0;
                left: 0;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "bottom")) {
            &.bottom {
                bottom: 0;
                left: 50%;
            }
        }

        @if (is-feature-enabled("all-positions") or index($titon-toast-positions, "bottom-right")) {
            &.bottom-right {
                bottom: 0;
                right: 0;
            }
        }

        @if (is-feature-enabled("all-positions") or (index($titon-toast-positions, "top") or index($titon-toast-positions, "bottom"))) {
            &.top,
            &.bottom {
                transform: translateX(-50%);
            }
        }

        @if (is-feature-enabled("all-positions") or (index($titon-toast-positions, "left") or index($titon-toast-positions, "right"))) {
            &.left,
            &.right {
                transform: translateY(-50%);
            }
        }
    }

    #{$titon-toast-class} {
        margin-top: 1rem;
        transition: all map-get($titon-toast, "transition");
        padding: theme-setting("medium-padding");
    }

    //-------------------- Animations --------------------//

    #{$titon-toast-class} {
        @if (is-feature-enabled("all-animations") or index($titon-toast-animations, "slide-up")) {
            &.slide-up {
                transform: translateY(50%);

                &.is-expanded {
                    transform: translateY(0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-toast-animations, "slide-down")) {
            &.slide-down {
                transform: translateY(-50%);

                &.is-expanded {
                    transform: translateY(0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-toast-animations, "slide-left")) {
            &.slide-left {
                transform: translateX(25%);

                &.is-expanded {
                    transform: translateX(0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-toast-animations, "slide-right")) {
            &.slide-right {
                transform: translateX(-25%);

                &.is-expanded {
                    transform: translateX(0);
                }
            }
        }
    }
}
